<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>

</head>

<body>
    <div id="app">
        <h2> {{title}} </h2>
        <hr>
        <Head-one></Head-one>
        <parent></parent>

    </div>


    <template id="parent">
        <div>
            <h2>parent - parent - 父组件 </h2>
            <h2>count -- {{count}}</h2>
            <h2>word -- {{word}}</h2>
            <div :style="{background:'pink',width:'140px',height:'140px',display:show?'block':'none'}">
                我是被子组件控制的
            </div>
            <hr>
            <child-one @wwwww="getNewCount" @aaaa="getNewWord" :show="show" :change="change" :changeshow="changeShow">

            </child-one>
        </div>


    </template>

    <template id="childone">
        <div>
            <h2> childone - childone - 1 </h2>
            <button @click="changeparentcount">自定义事件去修改父组件 count</button>
            <p>
                <input type="text" @input="changeparentword">
            </p>
            <button @click="changeparent">$parent 去修改父组件 count</button>
            <button @click="changeshow(!show)">反向的props 去修改父组件</button>
            <button @click="change(18,'每天的代码必须当天练习结束')">反向的props 去修改父组件2 </button>

        </div>
    </template>
</body>
<script>
    const head = {
        template: "<h2>Head - Head - WH2110-daydayup</h2>"
    }
    Vue.component("HeadOne", head)

    Vue.component("parent", {
        template: "#parent",

        methods: {
            change(count, word) {
                this.count += count;
                this.word = word;
            },
            getNewCount(data) {
                console.log(data);
                this.count += data
            },
            getNewWord(word) {
                this.word = word
            },
            changeShow(show) {
                this.show = show;
            }
        },

        data() {
            return {
                word: "Are you OK - 2110",
                count: 2000,
                show: true
            }
        },

        components: {
            childOne: {
                template: "#childone",
                props: {
                    show: Boolean,
                    changeshow: Function,
                    change: Function
                },
                methods: {
                    changeparentcount() {
                        // 子组件发送事件
                        this.$emit("wwwww", 100)
                    },
                    changeparentword(e) {
                        this.$emit("aaaa", e.target.value)
                    },
                    changeparent() {
                        // this.$parent ==>父组件的 this
                        // this.$parent.$parent

                        this.$parent.count++
                        this.$parent.word = "I am so Happy with KTV"
                        this.$parent.$parent.title = "so sad "
                    }
                }
            }
        }
    })
    // 根实例 根组件
    const vm = new Vue({
        data: {
            title: "Vue 组件 子改父   ",
            word: 'wh2110-daydayup'
        },
        mounted() {
            document.getElementsByTagName("title")[0].innerHTML = this.title;
        }
    }).$mount("#app")
</script>
<!-- 

    组件  小巧  独立  可复用  
    组件系统 
    组件组织关系  
    1. 父子组件关系
    <A> 
        <B></B>
        <C></C>
    </A>
    2. 兄弟组件关系  
    <B></B>
    <C></C>

    Emit    发送
    On      监听
    Once    只触发一次

    组件之间的通信
    1.父组件访问子组件  （父组件修改子组件）

    2.子组件访问父组件
    a.  自定义事件  emit 子组件发送事件 on父组件监听事件 修改内部变量
    b.  $parent     父实例，如果当前实例有的话  父组件
    c.  方向props   父组件  把修改自身变量的方法函数props 传递给子组件 子组件执行这个props
 -->

</html>